<template>
  <div>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane key="1" tab="评价主体设置" style="padding:0 20px;">
        <a-table
          :columns="subjectColumns"
          :dataSource="subjectData"
          :pagination="false"
          rowKey="id"
        >
          <template slot="weight" slot-scope="text, record">
            <a-input-number
              v-model="record.weight"
              :min="0"
              :max="100"
              :step="5"
              :formatter="value => `${value}%`"
              :parser="value => value.replace('%', '')"
              style="width: 100px"
            />
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button type="link" size="small" @click="editSubject(record)">编辑</a-button>
            <a-divider type="vertical" />
            <a-button type="link" size="small" @click="deleteSubject(record)">删除</a-button>
          </template>
        </a-table>
        <div style="margin-top: 16px;">
          <a-button type="primary" @click="showAddSubjectModal">
            <a-icon type="plus" /> 添加评价主体
          </a-button>
        </div>
      </a-tab-pane>
	  <a-tab-pane key="2" tab="评价问卷题目管理">
		  <a-tabs defaultActiveKey="1">
		    <a-tab-pane key="1" tab="学生评价问卷">
		      <question-table type="student" />
		    </a-tab-pane>
		    <a-tab-pane key="2" tab="督导评价问卷">
		      <question-table type="supervisor" />
		    </a-tab-pane>
		    <a-tab-pane key="3" tab="领导评价问卷">
		      <question-table type="leader" />
		    </a-tab-pane>
		  </a-tabs>
		 </a-tab-pane>
	  </a-tabs>
    
    
    <a-modal
      title="添加评价主体"
      :visible="subjectModalVisible"
      @ok="handleSubjectOk"
      @cancel="handleSubjectCancel"
      :width="600"
    >
      <a-form :form="subjectForm" layout="vertical">
        <a-form-item label="评价主体名称">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '请输入评价主体名称' }] }]"
            placeholder="如：学生评价、督导评价等"
          />
        </a-form-item>
        <a-form-item label="权重(%)">
          <a-input-number
            v-decorator="['weight', { rules: [{ required: true, message: '请输入权重' }] }]"
            :min="0"
            :max="100"
            :step="5"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea
            v-decorator="['description']"
            :rows="3"
            placeholder="请输入评价主体的描述信息"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import QuestionTable from './QuestionTable'

export default {
  components: {
    QuestionTable
  },
  data() {
    return {
      subjectColumns: [
        {
          title: '评价主体',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '权重(%)',
          dataIndex: 'weight',
          key: 'weight',
          scopedSlots: { customRender: 'weight' }
        },
        {
          title: '成员数量',
          dataIndex: 'memberCount',
          key: 'memberCount'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text) => (
            <a-tag color={text === '启用' ? 'green' : 'red'}>{text}</a-tag>
          )
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      subjectData: [
        {
          id: '1',
          name: '学生评价',
          weight: 40,
          memberCount: 2560,
          status: '启用'
        },
        {
          id: '2',
          name: '督导评价',
          weight: 20,
          memberCount: 12,
          status: '启用'
        },
        {
          id: '3',
          name: '领导评价',
          weight: 15,
          memberCount: 8,
          status: '启用'
        },
        {
          id: '4',
          name: '同行评价',
          weight: 15,
          memberCount: 86,
          status: '启用'
        },
        {
          id: '5',
          name: '教师自评',
          weight: 10,
          memberCount: 120,
          status: '启用'
        }
      ],
      subjectModalVisible: false,
      currentSubject: null
    }
  },
  beforeCreate() {
    this.subjectForm = this.$form.createForm(this, { name: 'subject_form' })
  },
  methods: {
    showAddSubjectModal() {
      this.currentSubject = null
      this.subjectModalVisible = true
      this.$nextTick(() => {
        this.subjectForm.resetFields()
      })
    },
    editSubject(record) {
      this.currentSubject = record
      this.subjectModalVisible = true
      this.$nextTick(() => {
        this.subjectForm.setFieldsValue({
          name: record.name,
          weight: record.weight,
          description: record.description || ''
        })
      })
    },
    deleteSubject(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除评价主体"${record.name}"吗？`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.subjectData = this.subjectData.filter(item => item.id !== record.id)
          this.$message.success('删除成功')
        }
      })
    },
    handleSubjectOk() {
      this.subjectForm.validateFields((err, values) => {
        if (!err) {
          if (this.currentSubject) {
            // 更新
            Object.assign(this.currentSubject, values)
            this.$message.success('更新成功')
          } else {
            // 新增
            const newSubject = {
              id: `subject_${Date.now()}`,
              name: values.name,
              weight: values.weight,
              memberCount: 0,
              status: '启用',
              ...values
            }
            this.subjectData.push(newSubject)
            this.$message.success('添加成功')
          }
          this.subjectModalVisible = false
        }
      })
    },
    handleSubjectCancel() {
      this.subjectModalVisible = false
    }
  }
}
</script>